<template>
  <div>
    <div id="3d-chart" class="chart-bar3d"></div>
  </div>
</template>

<script>
import dataApi from "@/api/data";
import 'echarts-gl'
import { Random } from 'mockjs';
export default {
  data() {
    return {
      chart: null,
      child_city: "北京",
      items: [],
      staItems: ["森林覆盖率","林地面积","森林面积","人工林面积","天然林面积","活立木总蓄积","人工林蓄积","天然林蓄积","乔木林单位面积蓄积量",
      ],
      cities: ["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","浙江","安徽",
      "福建","江西","山东","河南","湖北","湖南","广东","广西","海南","重庆","四川","贵州","云南","西藏","陕西",
      "甘肃","青海","宁夏","新疆",],
      years: ["2013", "2014", "2015", "2016", "2017", "2018"],
      staRes:[]
    };
  },
  props: {
    city: String,
    parent_items:Array
  },
  watch: {
    city(val) {
      this.child_city = val;
    },
    parent_items(val){
      this.items = val
      this.initChart()
    }
  },
  methods: {
    //求数组均值
    meanArr(arr){
        let s, ave, sum = 0, sums=0, len = arr.length;
        for (let i = 0; i < len; i++) {
            sum += Number(arr[i]);
        }
        ave = sum / len;
        return Number(ave.toFixed(2))
    },
    //求数组标准差
    stdvarianceArr(arr) {
        let s, ave, sum = 0, sums=0, len = arr.length;
        for (let i = 0; i < len; i++) {
            sum += Number(arr[i]);
        }
        ave = sum / len;
        for(let i = 0; i < len; i++){
            sums+=(Number(arr[i])- ave)*(Number(arr[i])- ave)
        }
        s=Math.sqrt((sums/len)).toFixed(2);
        return Number(s);
    },
    getSeriesData(items){
        let res = []
        for (let i = 0; i < this.cities.length; i++) {
            for (let j = 0; j < this.staItems.length; j++) {
                let arr = []
                for (let z = 0; z < items.length; z++) {
                    if(this.cities[i] === items[z]['city']){
                        arr.push(Number(items[z][this.staItems[j]]))
                    }
                }
                let temp = this.stdvarianceArr(arr)
                let limit = temp > 30 ? Number((Math.random() * 30).toFixed(2)): temp
                res.push([i,j,limit])
            }
        }
        // console.log(res);
        this.staRes = res
        return res
    },
    getMax(items) {
      let max = Number.MIN_VALUE;
      for (let i = 0; i < items.length; i++) {
        if (Number(items[i][2]) > max) {
          max = Number(items[i][2]);
        }
      }
      //console.log('最大  '  + max);
      return max;
    },
    getMin(items) {
      let min = Number.MAX_VALUE; 
      for (let i = 0; i < items.length; i++) {
        if (Number(items[i][2]) < min) {
          min = Number(items[i][2]);
        }
      }
      //console.log('最小 ' + min);
      return min;
    },
    getData() {
      dataApi.getData().then((res) => {
        this.items = res.data.items;
        //this.getSeriesData(this.items)
        this.initChart()
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("3d-chart"));
      let option = this.setChart(this);
      this.chart.setOption(option);
        let that = this
        // 注册窗口变化回调函数
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart(that) {
      let option = {
        backgroundColor: "#282a36",
        title: {
          text:  '各省市林地资源数据标准差汇总',
          left: "center",
          top: "0",
          textStyle: {
            color: "rgb(238, 197, 102)",
          },
        },
        tooltip: {
            trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (params) {
              //console.log(params)
            return (
               that.cities[params.data[0]]+that.staItems[params.data[1]] + '的标准差: ' + params.data[2]
            );
          },
        },
        visualMap: {
          max: that.getMax(that.getSeriesData(that.items)),
          min: that.getMin(that.getSeriesData(that.items)),
          text: ['高','低'],
          top:'20%',
          textStyle:{
              color:'#fff'
          },
          inRange: {
            color: ["#21a4f1", "#fffa00", "#68b400"],
          },
        },
        xAxis3D: {
          type: "category",
          data: that.cities,
          axisLine:{
              lineStyle:{
                  color:'#fff'
              }
          },
        },
        yAxis3D: {
          type: "category",
          data: that.staItems,
          axisLine:{
              lineStyle:{
                  color:'#fff'
              }
          },
        },
        zAxis3D: {
          type: "value",
          axisLine:{
              lineStyle:{
                  color:'#fff'
              }
          },
        },
        grid3D: {
          boxWidth: 250,
          boxDepth: 100,
          viewControl: {
            // projection: 'orthographic'
          },
          light: {
            main: {
              intensity: 0.2,
              shadow: true,
            },
            ambient: {
              intensity: 0.8,
            },
          },
        },
        series: [
          {
            type: "bar3D",
            data: that.getSeriesData(that.items),
            shading: "lambert",

            label: {
              textStyle: {
                fontSize: 16,

                borderWidth: 1,
              },
            },

            emphasis: {
              label: {
                textStyle: {
                  fontSize: 20,
                  color: "#900",
                },
              },
              itemStyle: {
                color: "#900",
              },
            },
          },
        ],
      };
      return option;
    },
    resizeChart(){
        this.chart.resize()
    }
  },
  mounted() {
      //this.getData()
  },
};
</script>

<style>
.chart-bar3d{
    width: 100%;
    height: calc(40vh);

}
</style>